2편. 다국어 웹사이트 언어 선택 UI 설계: 배치부터 국기 금지까지
지난 1편에서 URL 구조를 결정했다. 이제 사용자가 실제로 마주치는 화면을 설계할 차례다. 언어 선택 UI는 단순한 버튼 하나가 아니다. 잘못 설계하면 독자가 원하는 언어를 찾지 못하고 이탈한다. 온라인 신문사라면 특히 첫 방문자의 이탈을 막는 게 중요하다.
다국어 웹사이트 구조와 기술 설계
2편. 언어 선택 UI는 설계방법 ←현재글
3편. CMS와 번역 도구 선택 기준 (예정)
4편. 다국어 사이트 기술 체크리스트 (예정)
5편. 모바일과 글로벌 템플릿 설계 팁 (예정)
6편. 운영 효율을 높이는 구조 설계 원칙 (예정)
7편. 구축 전 반드시 확인할 테스트 항목 (예정)
언어 선택 UI, 왜 중요한가?
언어 선택기는 국제 독자가 사이트에서 가장 먼저 찾는 UI 요소다. 찾지 못하면 사이트가 다국어를 지원하지 않는다고 판단하고 떠난다.
반대로 잘 설계된 언어 선택기는 체류 시간을 늘리고 바운스율을 낮춘다. 이는 검색엔진에도 긍정적인 신호를 준다. 전환율에도 직접 영향을 미친다. 간과하기 쉽지만 SEO와 수익화 모두에 연결된 요소다.
어디에 배치할 것인가?
위치는 가장 먼저 결정해야 할 사항이다.
헤더 우측 상단이 가장 표준적인 위치다. 사용자 대부분이 언어 선택기를 이곳에서 찾는다. 습관적 탐색 경로에 맞춰야 한다. 글로벌 미디어 대부분이 이 방식을 쓴다.
푸터도 보조 위치로 활용할 수 있다. 단독으로 쓰기보다 헤더와 함께 배치하는 게 좋다. 처음 방문한 독자가 푸터까지 스크롤하기를 기대하는 건 무리다.
모바일에서는 햄버거 메뉴 안에 넣는 게 일반적이다. 화면이 좁기 때문이다. 단, 메뉴를 열어야 보이므로 발견 가능성이 낮아진다. 언어를 2~3개만 지원한다면 상단 바에 텍스트 링크로 노출하는 게 낫다.
핵심 원칙은 '독자가 찾기 위해 헤매서는 안 된다.'는 거다.
어떤 형태로 만들 것인가?
형태는 지원하는 언어 수에 따라 달라진다.
2~3개 언어: 텍스트 링크나 토글 버튼이 가장 깔끔하다. 한국어 | English 형태로 헤더에 바로 노출하면 된다. 드롭다운 없이도 충분하다.
4~8개 언어: 드롭다운 메뉴가 적합하다. 클릭하면 목록이 펼쳐지고 선택할 수 있다. 내비게이션 바에 자연스럽게 녹아든다.
10개 이상 언어: 모달 창(Modal Window)을 고려한다. 클릭하면 전체 화면에 언어 목록이 펼쳐지는 방식이다. Airbnb가 대표적인 예다. 언어가 많아도 한눈에 스캔할 수 있다.
언어 표기는 반드시 해당 언어로
이건 실수가 잦은 지점이다.
언어 이름은 반드시 그 언어로 표기해야 한다. 독일어는 'Deutsch', 일본어는 '日本語', 아랍어는 'العربية'다. 'German', 'Japanese', 'Arabic'으로 표기하면 안 된다.
이유가 있다. 독일어를 모르는 사람이 사이트에 왔다고 가정하자. 그 사람은 영어로 쓰인 'German'을 읽지 못할 수도 있지만 'Deutsch'는 알아볼 수 있다. 언어 선택기는 모든 독자를 위한 것이기 때문이다.
'EN', 'KO' 같은 언어 코드 약자도 피하는 게 좋다. 라틴 문자를 모르는 독자에게는 의미가 없다.
국기(Flag) 아이콘은 쓰지 말 것
국기를 언어 아이콘으로 쓰는 사이트가 많다. 직관적으로 보이지만 문제가 많다. 스페인어는 스페인, 멕시코, 아르헨티나, 콜롬비아 등 20개 이상 나라에서 쓴다. 어느 나라 국기를 써야 하나? 아랍어는 22개 국가에서 공용어다. 영어도 마찬가지다. 국기는 나라를 상징하지 언어를 상징하지 않는다.
정치적 민감성 문제도 있다. 특정 국기가 일부 독자에게 거부감을 줄 수 있다. 텍스트 기반으로 가는 것이 가장 안전하고 가장 명확하다.
자동 감지, 써야 할까?
브라우저 언어를 자동으로 감지해 해당 언어 페이지로 리다이렉트 하는 기능이 있다. 편리해 보이지만 주의가 필요하다.
문제 상황 하나. 스페인에 여행 중인 한국인이 있다. IP 기반으로 자동 감지하면 스페인어 페이지가 뜬다. 브라우저 언어 기반이라면 조금 낫지만 회사 기기나 공용 기기를 쓸 때 엉뚱한 언어가 감지된다.
문제 상황 둘. SEO 측면에서 자동 리다이렉트는 구글 크롤러의 페이지 인덱싱을 방해할 수 있다. 크롤러는 특정 언어로 고정된 경우가 많기 때문이다.
자동 감지는 첫 방문 시 제안(Suggestion)으로만 활용해야 한다. '영어 페이지로 이동하시겠습니까?' 같은 배너 형태가 적절하다. 강제 리다이렉트는 하지 말자. 수동 선택 옵션은 항상 남겨두어야 한다.
사용자가 선택한 언어는 쿠키로 저장해야 한다. 다음 방문 시 같은 언어가 유지되어야 한다. 매번 선택하게 만드는 건 불편함을 반복시키는 것이다.
한겨레의 언어 전환 방식
국내 언론사 중 다국어 운영에 적극적인 곳이 한겨레다. 한겨레는 한국어, 영어, 일본어, 중국어를 지원한다. 언어 전환 링크를 헤더에 텍스트 형태로 배치했다. 국기 없이 언어 이름을 직접 노출한다. 각 언어판은 별도 섹션 URL 구조로 분리되어 있다.
소규모 신문사 입장에서 참고할만하다. 한겨레는 언어별로 모든 기사를 번역하지 않는다. 주요 기사 중 일부만 선택적으로 번역해 영어·일어·중문판에 올린다. 이 방식은 번역 비용을 줄이면서도 다국어 존재감을 유지하는 현실적인 전략이다.
SEO와 연결되는 UI 설계 포인트
언어 선택기는 단순한 UI가 아니다. SEO 구조와 연결되어야 한다.
언어를 전환할 때 URL도 바뀌어야 한다. 예를 들어 /ko/article-slug에서 영어로 바꾸면 /en/article-slug로 이동해야 한다. 같은 URL에서 자바스크립트로만 내용이 바뀌면 구글이 두 버전을 별개 페이지로 인식하지 못한다.
언어 선택기가 작동할 때 hreflang 태그와 연동되어 있는지도 확인해야 한다. 언어 전환 후 이동한 페이지에 올바른 hreflang 태그가 설정되어 있어야 구글이 각 언어 버전을 정확하게 연결한다.
GEO(생성형 엔진 최적화) 관점에서도 마찬가지다. AI 검색 엔진이 사이트를 인용할 때, 언어별 URL이 명확하게 분리되어 있어야 올바른 언어 버전을 참조한다.
온라인 신문사 창업자를 위한 실전 체크리스트
언어 선택 UI를 설계하기 전, 아래 항목을 확인하자.
□ 언어 선택기는 헤더에 있는가?
□ 언어 이름은 해당 언어로 표기했는가? (국기 없이)
□ 언어 전환 시 URL이 바뀌는가?
□ 사용자 선택이 쿠키로 저장되는가?
□ 모바일에서도 쉽게 찾을 수 있는가?
□ 자동 감지를 쓴다면, 강제 리다이렉트가 아닌 제안 형태인가?
□ hreflang 태그와 언어 전환 링크가 연동되어 있는가?
이 일곱 가지만 지켜도 대부분의 실수를 피할 수 있다.
정리
| 항목 | 권장 | 비권장 |
| 위치 | 헤더 우측 상단 | 푸터 단독 배치 |
| 표기 | 해당 언어로 (Deutsch, 日本語) | 영어 번역명(German, Japanese) |
| 아이콘 | 텍스트 기반 | 국기 아이콘 |
| 자동 감지 | 배너로 제안 | 강제 리다이렉트 |
| 기억 | 쿠키로 저장 | 매번 선택 요구 |
| URL 연동 | 언어 전환 시 URL 변경 | JS만으로 내용 교체 |
언어 선택 UI는 기술적인 문제가 아니다. 독자 경험의 문제다. 작은 설계 하나가 국제 독자의 첫인상을 결정한다.
다음 편에서는 CMS와 번역 도구 선택 기준을 다룬다. 워드프레스, Ghost, 헤드리스 CMS 중 무엇이 다국어 신문사에 맞는지, 번역 플러그인과 AI 번역 서비스를 어떻게 조합할지 살펴볼 예정이다.
다국어 웹사이트 운영 팁 시리즈 3편: CMS와 번역 도구 선택 기준 → 다음 글 보기
댓글
댓글 쓰기